{% extends "admin/base.html" %}
{% block title %}编辑题目 - 管理员控制台{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 min-h-screen">
  <!-- 页面标题区 -->
  <div class="mb-8">
    <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">编辑题目</h1>
    <p class="mt-2 text-lg text-gray-600">修改 "{{ problem.title }}" 的详细信息</p>
    <div class="w-20 h-1 bg-blue-600 mt-4 rounded-full"></div>
  </div>

  <form method="post" class="bg-white rounded-xl shadow-md overflow-hidden">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <!-- 基础信息分组 -->
    <div class="border-b border-gray-200">
      <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
            <i class="fas fa-info-circle mr-2 text-indigo-500"></i>基础信息
          </h2>
      
      <div class="p-6 space-y-6">
        <!-- 标题 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">题目标题 <span class="text-red-500">*</span></label>
          <input type="text" name="title" value="{{ problem.title }}" 
                 class="w-full border border-gray-300 rounded-lg px-4 py-2.5 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                        transition-all" 
                 required>
          <p class="mt-1 text-xs text-gray-500">请输入清晰、简洁的题目名称</p>
        </div>

        <!-- 难度 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">难度级别 <span class="text-red-500">*</span></label>
          <select name="difficulty" 
                  class="w-full border border-gray-300 rounded-lg px-4 py-2.5 
                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                         transition-all">
            <option value="简单" {% if problem.difficulty == '简单' %}selected{% endif %}>简单</option>
            <option value="中等" {% if problem.difficulty == '中等' %}selected{% endif %}>中等</option>
            <option value="困难" {% if problem.difficulty == '困难' %}selected{% endif %}>困难</option>
          </select>
        </div>

        <!-- 描述 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">题目描述 <span class="text-red-500">*</span></label>
          <textarea name="description" rows="6" 
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 
                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                           transition-all" 
                    required>{{ problem.description }}</textarea>
          <p class="mt-1 text-xs text-gray-500">请详细描述题目的要求、输入输出格式和注意事项</p>
        </div>
      </div>
    </div>

    <!-- 代码设置分组 -->
    <div class="border-b border-gray-200">
      
      <div class="p-6 space-y-6">
        <!-- 初始代码（JSON） -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">初始代码（JSON）</label>
          <textarea name="initial_codes" rows="4" 
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 font-mono text-sm
                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                           transition-all">{{ problem.initial_codes|tojson }}</textarea>
          <p class="mt-1 text-xs text-gray-500">为不同编程语言提供的初始代码框架，JSON格式</p>
        </div>

        <!-- 函数签名（JSON） -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">函数签名（JSON）</label>
          <textarea name="function_signature" rows="4" 
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 font-mono text-sm
                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                           transition-all">{{ problem.function_signature|tojson }}</textarea>
          <p class="mt-1 text-xs text-gray-500">定义题目的函数接口规范，JSON格式</p>
        </div>
      </div>
    </div>

    <!-- 测试与编译设置分组 -->
    <div>
      <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
            <i class="fas fa-code mr-2 text-indigo-500"></i>代码配置
          </h2>
      
      <div class="p-6 space-y-6">
        <!-- 测试用例目录 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">测试用例目录</label>
          <input type="text" name="testcases_dir" value="{{ problem.testcases_dir }}" 
                 class="w-full border border-gray-300 rounded-lg px-4 py-2.5 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                        transition-all">
          <p class="mt-1 text-xs text-gray-500">存放测试用例文件的目录路径</p>
        </div>

        <!-- 编译模板文件 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">编译模板文件</label>
          <input type="text" name="template_file" value="{{ problem.template_file }}" 
                 class="w-full border border-gray-300 rounded-lg px-4 py-2.5 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                        transition-all">
          <p class="mt-1 text-xs text-gray-500">用于代码编译的模板文件路径</p>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="bg-gray-50 px-6 py-5 flex justify-end gap-4 border-t border-gray-200">
      <button type="submit" 
              class="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium
                     hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                     transition-all">
        保存修改
      </button>
      <a href="{{ url_for('admin_manage_problems') }}" 
         class="bg-gray-200 text-gray-700 px-6 py-2.5 rounded-lg font-medium
                hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
                transition-all">
        取消
      </a>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<!-- 若无需动态添加测试用例/模板，可移除原有 JS 逻辑 -->
{% endblock %}
